import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  pickOwnForBasicComponent,
  usePropsTwoWayValues,
} from 't/common/utils';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from 'vue';

import './ChipGroup.scss';
import _, { forIn } from 'lodash';

import {
  date,
  debounce,
  dom,
  setCssVar,
  useQuasar,
  scroll,
} from '@teld/q-components';
import { useClipProps } from 't/bussiness/quick-filter/use-quick-filter';
import HelpTip from './HelpTip';

export default defineComponent({
  props: {
    ...commonProps,
    ...useClipProps,
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();


    const defaultSlot = clip => {
      return slots.default ? (
        slots.default(clip)
      ) : props.enableStatistics && props.showSummaryCount ? (
        <>
          {clip.label} <span class='item-count'>{clip.count}</span>
        </>
      ) : (
        clip.label
      );
    };



    return () => {
      return (
        <div class='row FilterItem items-center' style=''>
          {slots.before && slots.before()}
          {props.showTitle && props.label && (
            <div class='t-quick-filter_chip-group-label'>
              {props.label}
              <HelpTip {...props}></HelpTip>
            </div>
          )}
          {props.clips.map(clip => {
            return defaultSlot(clip);
          })}
          {props.isLast && <span class={['divider']}></span>}
        </div>
      );
    };
  },
});
